<%@ page import="db.MaintenanceDAO" %>
<%@ page import="beans.MaintenanceBean" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.util.Base64" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>维修记录详情</title>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: #f6f6f6;
            margin: 0;
            padding: 20px;
        }
        .detail-container {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .detail-header {
            font-size: 1.5rem;
            color: #183a8a;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .detail-row {
            display: flex;
            margin-bottom: 15px;
        }
        .detail-label {
            width: 120px;
            font-weight: bold;
            color: #555;
        }
        .detail-value {
            flex: 1;
        }
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .action-btn {
            padding: 8px 20px;
            background-color: #183a8a;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }
        .action-btn:hover {
            background-color: #2450a7;
        }
        .approve-btn {
            background-color: #28a745;
        }
        .approve-btn:hover {
            background-color: #218838;
        }
        .reject-btn {
            background-color: #dc3545;
        }
        .reject-btn:hover {
            background-color: #c82333;
        }
        .receipt-container {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
        }
        .receipt-image {
            max-width: 100%;
            max-height: 400px;
            display: block;
            margin: 10px auto;
        }
        .disabled-btn {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        .disabled-btn:hover {
            background-color: #6c757d;
        }
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 5px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover {
            color: black;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            min-height: 100px;
        }
        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
    </style>
</head>
<body>
<div class="detail-container">
    <div class="detail-header">维修记录详情</div>
    <%
        String id = request.getParameter("id");
        if (id != null && !id.isEmpty()) {
            MaintenanceDAO dao = new MaintenanceDAO();
            try {
                MaintenanceBean record = dao.getMaintenanceById(Integer.parseInt(id));
                SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");
                if (record != null) {
                    boolean isPending = "待审核".equals(record.getStatus());
    %>
    <div class="detail-row">
        <div class="detail-label">单号:</div>
        <div class="detail-value"><%= record.getMaintenanceId() %></div>
    </div>
    <div class="detail-row">
        <div class="detail-label">车牌号:</div>
        <div class="detail-value"><%= record.getLicensePlate() != null ? record.getLicensePlate() : "N/A" %></div>
    </div>
    <div class="detail-row">
        <div class="detail-label">司机:</div>
        <div class="detail-value"><%= record.getDriverName() != null ? record.getDriverName() : "N/A" %></div>
    </div>
    <div class="detail-row">
        <div class="detail-label">维修费用:</div>
        <div class="detail-value"><%= record.getCost() != null ? "¥" + record.getCost() : "N/A" %></div>
    </div>
    <div class="detail-row">
        <div class="detail-label">维修时间:</div>
        <div class="detail-value"><%= record.getMaintenanceTime() != null ? dateFormat.format(record.getMaintenanceTime()) : "N/A" %></div>
    </div>
    <div class="detail-row">
        <div class="detail-label">状态:</div>
        <div class="detail-value"><%= record.getStatus() %></div>
    </div>
    <div class="detail-row">
        <div class="detail-label">审核人:</div>
        <div class="detail-value"><%= record.getReviewer() != null ? record.getReviewer() : "N/A" %></div>
    </div>
    <div class="detail-row">
        <div class="detail-label">用途:</div>
        <div class="detail-value"><%= record.getPurpose() != null ? record.getPurpose() : "N/A" %></div>
    </div>

    <!-- 凭证显示区域 -->
    <div class="receipt-container">
        <div class="detail-label">维修凭证:</div>
        <%
            if (record.getReceipt() != null && record.getReceipt().length > 0) {
                String imageData = Base64.getEncoder().encodeToString(record.getReceipt());
        %>
        <img src="data:image/jpeg;base64,<%= imageData %>" class="receipt-image" alt="维修凭证">
        <%
        } else {
        %>
        <div class="detail-value">无凭证</div>
        <%
            }
        %>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
        <a href="expenseClaim.jsp" class="action-btn">返回列表</a>
        <form action="ExportMaintenanceServlet" method="post" style="display: inline;">
            <input type="hidden" name="id" value="<%= record.getMaintenanceId() %>">
            <button type="submit" class="action-btn">导出维修单</button>
        </form>
        <form action="ApproveMaintenanceServlet" method="post" style="display: inline;">
            <input type="hidden" name="id" value="<%= record.getMaintenanceId() %>">
            <input type="hidden" name="action" value="approve">
            <button type="submit" class="action-btn approve-btn <%= isPending ? "" : "disabled-btn" %>"
                    <%= isPending ? "" : "disabled" %>>批准</button>
        </form>
        <button type="button" class="action-btn reject-btn <%= isPending ? "" : "disabled-btn" %>"
                <%= isPending ? "" : "disabled" %> id="rejectBtn">拒绝</button>
    </div>
    <%
    } else {
    %>
    <div class="error-message">未找到指定的维修记录</div>
    <%
        }
    } catch (SQLException e) {
        e.printStackTrace();
    %>
    <div class="error-message">查询数据库时出错: <%= e.getMessage() %></div>
    <%
        }
    } else {
    %>
    <div class="error-message">无效的维修记录ID</div>
    <%
        }
    %>
</div>

<!-- Rejection Reason Modal -->
<div id="rejectModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>输入拒绝理由</h2>
        <form id="rejectForm" action="ApproveMaintenanceServlet" method="post">
            <input type="hidden" name="id" value="<%= id %>">
            <input type="hidden" name="action" value="reject">
            <div class="form-group">
                <label for="rejectReason">拒绝理由:</label>
                <textarea id="rejectReason" name="rejectReason" required></textarea>
            </div>
            <div class="modal-actions">
                <button type="button" class="action-btn" id="cancelReject">取消</button>
                <button type="submit" class="action-btn reject-btn">提交拒绝</button>
            </div>
        </form>
    </div>
</div>

<script>
    // Get the modal and buttons
    const modal = document.getElementById("rejectModal");
    const rejectBtn = document.getElementById("rejectBtn");
    const cancelBtn = document.getElementById("cancelReject");
    const closeBtn = document.querySelector(".close");

    // Only add event listeners if the reject button exists and is enabled
    if (rejectBtn && !rejectBtn.disabled) {
        // Open modal when reject button is clicked
        rejectBtn.onclick = function() {
            modal.style.display = "block";
        }

        // Close modal when cancel button is clicked
        cancelBtn.onclick = function() {
            modal.style.display = "none";
        }

        // Close modal when X is clicked
        closeBtn.onclick = function() {
            modal.style.display = "none";
        }

        // Close modal when clicking outside the modal
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }
</script>
</body>
</html>